<template>
    <div>
        <el-form label-width="90px" :model="formState">
            <el-form-item label="账号" prop="username">
                <el-input v-model="formState.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="formState.password" />
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input :min="1" :max="200" v-model="formState.age" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="formState.sex">
                    <el-radio border label="男士" value="1" />
                    <el-radio border label="女士" value="2" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="地区" prop="region">
                <el-cascader v-model="formState.region" :options="regionStateOption" />
            </el-form-item>
            <el-form-item label="日期" prop="username">
                <el-input v-model="formState.cdata" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">
                    保存一下
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
//  引入组件库中的dayjs  是一个日期处理库，用于解析、格式化和操作日期。
import { dayjs } from 'element-plus';
import type { IAddOrderFormType } from "@/typings/orderType";
import { useAddValidate } from '@/views/lady/useValidate';
import type { FormInstance } from 'element-plus';

const formRef = ref<FormInstance>()
const rules = useAddValidate()

//  将来要添加的内容就是根据渲染下方表格的数据类型来添加的
//  omit 是ts 提供的一个工具类型，用来排除类型中某一属性  可以通过 & 将两个类型的属性进行合并
const formState = reactive<IAddOrderFormType>({
    username: '',
    password: '',
    sex: "1",
    age: 20,
    region: ['北京', '昌平'],
    avatar: 'http:xxx.com',
    realname: '',
    cdata: dayjs().add(-20 ,'y').format('YYYY-MM-DD')
})

//  二级级联式菜单
const regionStateOption = [
    {
        value:'北京',
        label: '北京',
        children:[
            {value:'昌平' , label:'昌平'},
            {value:'顺义' , label : '顺义'}
        ]
    },{
        value:'上海',
        label: '上海',
        children :[
            {value: '浦东' , label:'浦东'},
            {value: '塔塔' , label: "塔塔"}
        ]
    }
]

const submitForm = () => {
    if (!formRef.value) return
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            console.log('submit!')
        } else {
            return false
        }
    })
}
</script>

<style scoped></style>